<template>

  <div class="p-10 flex flex-col items-center justify-center gap-3 border-2 border-slate-200 rounded-lg shadow">

    <XoInput class="w-full" placeholder="请输入用户名" :message="userModel.username.message"
      v-model.trim="userModel.username.value" @blur="doValid('username')">
      <template #prefix>
        <span class="text-2xl pl-12 text-slate-200 icon-[mdi--user] peer"></span>
        <div class="w-[2px] h-10 bg-slate-200"></div>
      </template>
      <template #suffix>
        <span class="text-2xl pr-12 text-slate-200 icon-[mdi--close] peer hover:text-violet-500 hover:cursor-pointer"
          @click="handleClearField('username')"></span>
      </template>
    </XoInput>

    <XoInput class="w-full" type="password" :message="userModel.password.message" placeholder="请输入密码"
      v-model="userModel.password.value" @blur="doValid('password')">
      <template #prefix>
        <span class="text-2xl pl-12 text-slate-200 icon-[mdi--lock] focus-within:text-violet-500"></span>
        <div class="w-[2px] h-10 bg-slate-200"></div>
      </template>
      <template #suffix>
        <span class="text-2xl pr-12 text-slate-200 icon-[mdi--close] hover:text-violet-500 hover:cursor-pointer"
          @click="handleClearField('password')"></span>
      </template>
    </XoInput>

    <XoInput class="w-full" type="phone" :message="userModel.phone.message" placeholder="请输入手机号"
      v-model="userModel.phone.value" @blur="doValid('phone')">
      <template #prefix>
        <span class="text-2xl pl-12 text-slate-200 icon-[mdi--cellphone-android] focus-within:text-violet-500"></span>
        <div class="w-[2px] h-10 bg-slate-200"></div>
      </template>
      <template #suffix>
        <span class="text-2xl pr-12 text-slate-200 icon-[mdi--close] hover:text-violet-500 hover:cursor-pointer"
          @click="handleClearField('phone')"></span>
      </template>
    </XoInput>

    <XoInput class="w-full" type="text" placeholder="请输入昵称" :message="userModel.nickName.message"
      v-model="userModel.nickName.value" @blur="doValid('nickName')">
      <template #prefix>
        <span class="text-2xl pl-12 text-slate-200 icon-[mdi--emoticon] focus-within:text-violet-500"></span>
        <div class="w-[2px] h-10 bg-slate-200"></div>
      </template>
      <template #suffix>
        <span class="text-2xl pr-12 text-slate-200 icon-[mdi--close] hover:text-violet-500 hover:cursor-pointer"
          @click="handleClearField('nickName')"></span>
      </template>
    </XoInput>

    <XoInput class="w-full" type="number" placeholder="请输入年龄" :message="userModel.age.message"
      v-model.number="userModel.age.value" @blur="doValid('age')">
      <template #prefix>
        <span class="text-2xl pl-12 text-slate-200 icon-[mdi--calendar-star]"></span>
        <div class="w-[2px] h-10 bg-slate-200"></div>
      </template>
      <template #suffix>
        <span class="text-2xl pr-12 text-slate-200 icon-[mdi--close] hover:text-violet-500 hover:cursor-pointer"
          @click="handleClearField('age')"></span>
      </template>
    </XoInput>

    <div class="w-full grid grid-cols-2 gap-3">
      <div class="btn btn-default" @click="handleReset">重置</div>
      <div class="btn btn-primary" @click="handleSubmit">提交</div>
    </div>

    <XoTips :type="tipModel.alertType">
      <!-- <div class=" text-sky-500 icon-[mdi--info]"></div> -->
      <div class="">{{ tipModel.msg }}</div>
    </XoTips>

  </div>
</template>
<script setup lang="ts">

import XoInput from './components/XoUI/xoInput.vue';
import XoTips from './components/XoUI/xoTips.vue';
import useUser from './hooks/user.hook';


const { userModel, tipModel, doValid, handleClearField, handleReset, handleSubmit } = useUser();




</script>
<style scoped></style>